// <--  纯JS -->

var id = 1;

function sel() {
	var name = document.getElementsByName("name")[1].value;
	var addr = document.getElementsByName("addr_s")[0].value;
	var trs = document.getElementsByTagName("tr");
	for (var i = 1; i < trs.length; i++) {
		trs[i].style.background = "#FFFFFF";
	}
	if (name == '' && addr == '') return;
	for (var i = 1; i < trs.length; i++) {
		var a = (name == '') || (trs[i].childNodes[1].innerHTML.indexOf(name) > -1);
		var b = (addr == '') || (trs[i].childNodes[4].innerHTML.indexOf(addr) > -1);
		if (a && b) {
			trs[i].style.background = "#FF0000";
		} else {
			trs[i].style.background = "#FFFFFF";
		}

	}

}

function add() {
	var name = document.getElementsByName("name")[0].value;
	var sexs = document.getElementsByName("sex");
	var sex_val = sexs[0].checked ? sexs[0].value : sexs[1].value;
	var hobbys = document.getElementsByName("hobby");
	var hobby_val = "";
	for (var i = 0; i < hobbys.length; i++) {
		var b = hobbys[i];
		if (b.checked) {
			hobby_val += (b.value + ' ');
		}
	}
	var addr = document.getElementsByName("addr")[0].value;

	var html = "<tr id='tr" + id + "'>" +
		"<td id='td1" + id + "'>" + id + "</td>" +
		"<td id='td2" + id + "'>" + name + "</td>" +
		"<td id='td3" + id + "'>" + sex_val + "</td>" +
		"<td id='td4" + id + "'>" + hobby_val + "</td>" +
		"<td id='td5" + id + "'>" + addr + "</td>" +
		"<td id='td6" + id + "'>" + "<a href='javascript:del(" + id + ")'>删除</a>  <a href='javascript:upd(" + id +
		")'>修改</a>" + "</td>" +
		"</tr>";

	document.getElementById("ttbody").innerHTML += html;
	id++;

}

function del(id) {
	var tri = document.getElementById("tr" + id);
	if (confirm("是否删除该记录？")) {
		tri.remove();
	}
}


function upd(id) {
	var td2 = document.getElementById("td2" + id);
	var td3 = document.getElementById("td3" + id);
	var td4 = document.getElementById("td4" + id);
	var td5 = document.getElementById("td5" + id);
	var td6 = document.getElementById("td6" + id);
	var name = td2.innerText;
	var sex = td3.innerText;
	var hobby = td4.innerText;
	var addr = td5.innerText;

	td2.innerHTML = "<input type=\"text\" name=\"upd_name" + id + "\" value=\"" + name + "\" />";

	var isMan = (sex == "男") ? "checked" : "";
	var isWoman = (sex == "女") ? "checked" : "";
	td3.innerHTML = "<label><input type=\"radio\" name=\"upd_sex" + id + "\" value=\"男\" " + isMan + "/>男</label>" +
		"<label><input type=\"radio\" name=\"upd_sex" + id + "\" value=\"女\" " + isWoman + "/>女</label>";

	var isRun = (hobby.indexOf('跑步') > -1) ? "checked" : "";
	var isSwim = (hobby.indexOf('游泳') > -1) ? "checked" : "";
	var isBad = (hobby.indexOf('羽毛球') > -1) ? "checked" : "";
	td4.innerHTML = "<label><input type='checkbox' name=\"upd_hobby" + id + "\" value='跑步' " + isRun + "/>跑步</label>" +
		"<label><input type='checkbox' name=\"upd_hobby" + id + "\" value='游泳'  " + isSwim + "/>游泳</label>" +
		"<label><input type='checkbox' name=\"upd_hobby" + id + "\" value='羽毛球'  " + isBad + "/>羽毛球</label>";

	var isBj = (addr == '北京') ? "selected" : "";
	var isSh = (addr == '上海') ? "selected" : "";
	var isSz = (addr == '深圳') ? "selected" : "";
	td5.innerHTML = "<select name=\"upd_addr" + id + "\">" +
		"<option value='北京' " + isBj + " >北京</option>" +
		"<option value='上海'" + isSh + ">上海</option>" +
		"<option value='深圳'" + isSz + ">深圳</option>" +
		"</select>";

	td6.innerHTML = "<a href ='javascript:save(" + id + ");'>保存</a>";
}

function save(id) {
	var name = document.getElementsByName("upd_name" + id)[0].value;
	var sexs = document.getElementsByName("upd_sex" + id);
	var sex = (sexs[0].checked) ? '男' : '女';
	var hobbys = document.getElementsByName("upd_hobby" + id);
	var hobby_val = "";
	for (var i = 0; i < hobbys.length; i++) {
		var b = hobbys[i];
		if (b.checked) {
			hobby_val += (b.value + ' ');
		}
	}
	var addr = document.getElementsByName("upd_addr" + id)[0].value;

	document.getElementById("td2" + id).innerHTML = name;
	document.getElementById("td3" + id).innerHTML = sex;
	document.getElementById("td4" + id).innerHTML = hobby_val;
	document.getElementById("td5" + id).innerHTML = addr;
	document.getElementById("td6" + id).innerHTML = "<a href='javascript:del(" + id +
		")'>删除</a>  <a href='javascript:upd(" + id +
		")'>修改</a>";


}
